<script setup lang="ts">
import { ref, unref, defineAsyncComponent, nextTick } from 'vue'
import type { BusinessUIFormType } from '@/types/custom'
import { clone } from 'xe-utils'
import { Tickets } from '@element-plus/icons-vue'

const TemplateForm = defineAsyncComponent(() => import('@/views/components/form/TemplateForm.vue'))
const QueryView = defineAsyncComponent(
  () => import('@/views/system/business/query/components/QueryView.vue')
)

const customForm = ref<BusinessUIFormType | undefined>()
const formRef = ref()
const viewRef = ref()
const labelPosition = ref('top')

/**
 * 生成预览
 */
const onPreview = () => {
  const view = unref(viewRef)
  if (view) {
    labelPosition.value = view.params.align || 'top'
    customForm.value = clone(view.params, true)
    nextTick(() => {
      formRef.value?.onFetch()
    })
  }
}

const onPreviewClose = () => {
  customForm.value = undefined
}

/**
 * 剧中方式
 * @param value
 */
const onLabelPosition = (value: string) => {
  labelPosition.value = value || 'top'
}
</script>

<template>
  <QueryView ref="viewRef" :label-position="labelPosition" type="form" @preview="onPreview">
    <template #view>
      <div class="mb5 flex align-center">
        <el-button :icon="Tickets" @click="onPreview" type="warning">预览</el-button>
        <el-button :icon="Tickets" @click="onPreviewClose" class="ml5">隐藏</el-button>
        <el-radio-group
          v-show="customForm"
          v-model="labelPosition"
          aria-label="居中方式"
          @change="onLabelPosition"
          class="ml5"
        >
          <el-radio-button value="left">靠左</el-radio-button>
          <el-radio-button value="right">靠右</el-radio-button>
          <el-radio-button value="top">换行</el-radio-button>
        </el-radio-group>
      </div>
      <TemplateForm
        ref="formRef"
        v-show="customForm"
        is-form
        :label-position="labelPosition"
        :ui-form="customForm"
        class="base-bg-color pa5 box-shadow mb5 mr3"
        style="border-radius: 5px"
      />
      <!--      <CustomForm :ui-form="customForm" title="表单预览栏" preview @preview="onPreview" @label-position="onLabelPosition" />-->
    </template>
  </QueryView>
</template>
